<template>
  <div class="tw-libiconsorts" >
  <template v-if="useLazeLoad">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      class="tw-libiconsortlist" :class="{xcolumn: isColumn, xwrap: resultColumns > 0, [`x${_uid}`]:true}" v-if="useLazeLoad && datas.length>0"
      v-model="loading"
      :finished="finished"
      finished-text=""
      @load="onLoad"
    >
      <li class="tw-iconslist-item"
        v-for="(item, idx) in datas"
        :key="idx"
        :style="{marginTop: resultColumns > 0 && idx + 1 > resultColumns ? itemSpacing : '0'}"
        >
        <div class="tw-iconslist-item-iconbox">
          <tw-camera
            :autoPlay="autoPlay"
            :index="idx"
            :key="idx"
            :width="videoWidth"
            :height="iconHeight"
            @curPlaer="getCurPlayer"
            :curPlay="curPlay"
            :topValue="topValue"
            :pageValue="pageValue"
            :currentCarema="item"
            :cameraError="item.err">
          </tw-camera>
        </div>

        <div class="tw-iconslist-item-body" @click="handleClick(item)">
          <div v-if="item.mulcontent && item.mulcontent.length>0"  style="display: flex;justify-content: space-between;" :style="{alignItems: alignItems ? alignItems : ''}">
            <div v-for="(itm, itx) in item.mulcontent" :key="itx"
             :style="{textAlign: itm.align ? itm.align : 'center', width: itm.width}">
              <div  v-if="itm.title" class="tw-iconslist-item-title" v-html="itm.title"></div>
              <div class="tw-iconslist-item-des">
                <span v-if="itm.content" v-html="itm.content"></span>
                <span v-if="itm.html" v-html="itm.html"></span>
              </div>
            </div>
          </div>
          <div v-else>
            <div v-if="item.title" class="tw-iconslist-item-title" v-html="item.title"></div>
            <div class="tw-iconslist-item-des">
              <span v-if="item.content" v-html="item.content"></span>
              <span v-if="item.html" v-html="item.html"></span>
            </div>
          </div>
        </div>
      </li>
    </van-list>
    </van-pull-refresh>
  </template>
  <template v-else>
    <ul class="tw-libiconsortlist" :class="{xcolumn: isColumn, xwrap: resultColumns > 0, [`x${_uid}`]:true}" v-if="datas && datas.length>0">
      <li class="tw-iconslist-item"
        v-for="(item, idx) in datas"
        :key="idx"
        :style="{marginTop: resultColumns > 0 && idx + 1 > resultColumns ? itemSpacing : '0'}"
        >
        <div class="tw-iconslist-item-iconbox">
          <tw-camera
            :autoPlay="autoPlay"
            :index="idx"
            :width="videoWidth"
            :height="iconHeight"
            :key="idx"
            @curPlaer="getCurPlayer"
            :curPlay="curPlay"
            :topValue="topValue"
            :pageValue="pageValue"
            :currentCarema="item"
            :cameraError="item.err">
          </tw-camera>
        </div>

        <div class="tw-iconslist-item-body" @click="handleClick(item)">
          <div v-if="item.mulcontent && item.mulcontent.length>0"  style="display: flex;justify-content: space-between;" :style="{alignItems: alignItems ? alignItems : ''}">
            <div v-for="(itm, itx) in item.mulcontent" :key="itx"
             :style="{textAlign: itm.align ? itm.align : 'center', width: itm.width}">
              <div  v-if="itm.title" class="tw-iconslist-item-title" v-html="itm.title"></div>
              <div class="tw-iconslist-item-des">
                <span v-if="itm.content" v-html="itm.content"></span>
                <span v-if="itm.html" v-html="itm.html"></span>
              </div>
            </div>
          </div>
          <div v-else>
            <div v-if="item.title" class="tw-iconslist-item-title" v-html="item.title"></div>
            <div class="tw-iconslist-item-des">
              <span v-if="item.content" v-html="item.content"></span>
              <span v-if="item.html" v-html="item.html"></span>
            </div>
          </div>
        </div>

      </li>
    </ul>
    <tw-lib-nodata v-show="datas.length===0" />
  </template>
  </div>
</template>

<script>
const props = require('./props')
import style from '../tw-lib-base/style'
import border from '../tw-lib-base/border/mixins'
import nodata from '../tw-lib-base/no-data/no-data'
import TwCamera from './tw-camera.vue'

export default {
  name: 'video-list',

  mixins: [style, border, nodata],

  components: {
    TwCamera
  },

  props,

  computed: {
    videoWidth () {
      if (this.iconWidth) {
        return this.iconWidth
      } else {
        return parseInt(document.body.scrollWidth) - 40
      }
    },
    resultColumns () {
      const columns = parseInt(this.columns)

      return columns && columns > 0 ? columns : 0
    },

    style () {
      return Object.assign({
        columns: this.columns,
        itemSpacing: this.itemSpacing,
        itemBg: this.itemBg,
        itemPadding: this.itemPadding,
        iconWidth: this.iconWidth,
        iconHeight: this.iconHeight,
        fontFamily: this.fontFamily,
        titleFontSize: this.titleFontSize,
        titleFontColor: this.titleFontColor,
        desFontSize: this.desFontSize,
        desFontColor: this.desFontColor,
        fontIconSize: this.fontIconSize,
        familyText: this.familyText,
        iconBool: this.iconBool,
        showLine: this.showLine,
        showMulText: this.showMulText,
        mulTextLine: this.mulTextLine,
        letterSpacing: this.letterSpacing,
        letterFontSize: this.letterFontSize,
        itemHeight: this.itemHeight,
        isColumnBg: this.isColumnBg,
        itemBg1: this.itemBg1,
        iconCenter: this.iconCenter,
        indexColor: this.indexColor
      }, this.borderStyle)
    }
  },

  mounted () {
    let vm = this
    vm.datas = vm.data.list
    // window.addEventListener('scroll', vm.handleWindowScroll)
  },

  data () {
    return {
      datas: [],
      loading: false,
      finished: false,
      refreshing: false,
      pageNum: 0, // 实际接口返回页码
      pageNo: 1, // 触发接口次数计算页码
      curPlay: 0
    }
  },
  methods: {
    getCurPlayer (param) {
      this.curPlay = param
    },
    onLoad () {
      setTimeout(() => {
        if (this.refreshing) {
          this.pageNum = 0
          this.pageNo = 1
          this.datas = []
          this.refreshing = false
        }

        if (this.pageNum + 1 === this.pageNo) { // 两者相等，表示数据同步准确
          // console.log('触发页码', this.pageNo)
          this.$emit('input', this.pageNo)
          this.$emit('change', this.pageNo)
        }
      }, 300);
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },
    handleClick (tab) {
      if (this.clickFunc !== '' && typeof this.clickFunc === 'function') {
        this.clickFunc()
      } else {
        if (tab.href) {
          if (tab.target === '_blank') {
            window.open(tab.href, '_blank')
          } else {
            window.location.href = tab.href
          }
        }
      }
    },
    setStyle () {
      let style = `
        ::root.tw-libiconsortlist {
          margin: ${this.itemMargin};
        }

        ::root > .tw-iconslist-item {
          padding: ${this.itemPadding};
          background: ${this.itemBg};
          font-family: ${this.familyText};
          border-radius: ${this.itemBorderRadius};
          box-shadow: ${this.boxshadow};
        }

        ::root > .tw-iconslist-item > .tw-iconslist-item-iconbox  {
          // width: ${this.iconWidth}px;
          // height: ${this.iconHeight}px;
          // text-align: ${this.iconCenter ? this.iconCenter : 'center'};
        }

        ::root > .tw-iconslist-item .tw-iconslist-item-title {
          font-size: ${this.titleFontSize};
          color: ${this.titleFontColor};
        }

        ::root > .tw-iconslist-item .tw-iconslist-item-des {
          font-size: ${this.desFontSize};
          color: ${this.desFontColor};
          font-family: ${this.familyText};
        }

      `

      if (this.isColumn) {
        style += `
          ::root > .tw-iconslist-item + .tw-iconslist-item {
            margin-top: ${this.itemSpacing}!important;
          }
        `
      } else {
        style += `
          ::root > .tw-iconslist-item + .tw-iconslist-item {
            margin-left: ${this.itemSpacing};
          }
        `
      }

      if (this.resultColumns > 0) {
        style += `
          ::root > .tw-iconslist-item {
            width: calc((100% - ${(this.columns - 1) * parseInt(this.itemSpacing || 0)}px)/${this.columns});
          }

          ::root > .tw-iconslist-item:nth-child(${this.resultColumns}n+1) {
            margin-left: 0;
          }
        `
      }

      if (this.fontFamily) {
        style += `
          .tw-iconslist-item {
            font-family: ${this.fontFamily};
          }
        `
      }

      if (this.hasBorder) {
        const border = `${this.borderSize} ${this.borderType} ${this.borderColor}`

        if (this.borderPosition.includes(0)) {
          style += `
              ::root > .tw-libiconsortlist {
                border-top: ${border};
              }
            `
        }

        if (this.borderPosition.includes(1)) {
          style += `
              ::root > .tw-libiconsortlist {
                border-bottom: ${border};
              }
            `
        }

        if (this.borderPosition.includes(2)) {
          style += `
            ::root > .tw-libiconsortlist {
                border-left: ${border};
              }
            `
        }

        if (this.borderPosition.includes(3)) {
          style += `
            ::root > .tw-libiconsortlist {
              border-right: ${border};
            }
          `
        }

        style += `
          ::root > .tw-libiconsortlist {
            border-radius: ${this.borderRadius};
        }
        `
      }

      if (this.showLine) {
        style += `
          ::root > .tw-iconslist-item + .tw-iconslist-item {
            border-top: 1px ${this.itemBorderType} ${this.itemBorderColor};
          }
        `
      }

      if (this.showMulText) {
        if (this.mulTextLine && parseInt(this.mulTextLine) >= 1) {
          style += `
            ::root > .tw-iconslist-item .tw-iconslist-item-des {
              overflow: hidden;
              white-space: normal;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: ${this.mulTextLine};
            }
          `
        } else {
          style += `
            ::root > .tw-iconslist-item .tw-iconslist-item-des {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: normal;
            }
          `
        }
      } else {
        style += `
          ::root > .tw-iconslist-item .tw-iconslist-item-des {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        `
      }

      if (this.iconBool) {
        style += `
          ::root > .tw-iconslist-item .tw-iconslist-item-iconbox .xicon {
            width: 100%;
          }
        `
      }

      if (this.itemHeight) {
        style += `
          ::root > .tw-iconslist-item {
            height: ${this.itemHeight};
          }
        `
      }
      if (true) {
        style += `
          ::root > .tw-iconslist-item .el-rate__icon {
            margin-right: ${this.letterSpacing};
            font-size: ${this.letterFontSize};
          }
        `
      }

      if (this.isColumnBg) {
         style += `
          ::root > .tw-iconslist-item:nth-child(even) {
            background-color: ${this.itemBg1};
          }

          ::root > .tw-iconslist-item:nth-child(odd) {
            background-color: ${this.itemBg};
          }
        `
      }

      this.addStyle(style)
    }
  },

  watch: {
    data: {
      deep: true,
      handler () {
        if (this.useLazeLoad) {
          if (this.data && this.data.list && this.data.list.length > 0) {
            if (parseInt(this.data.pageNum) === 1) {
              this.datas = this.data.list
              this.pageNum = 1
              this.pageNo = 2
              this.finished = false
              this.refreshing = false
            } else if (this.pageNum === this.pageNo - 1) {
              this.datas.push.apply(this.datas, this.data.list)
              this.pageNum = parseInt(this.data.pageNum)
              this.pageNo = this.pageNum + 1

              if (this.data.list.length < parseInt(this.pageSize)) {
                this.finished = true
                this.pageNo = this.pageNum
              }
            } else {
              this.finished = true
              this.pageNo = this.pageNum
            }
            this.loading = false;

            if (this.datas && this.datas.length >= this.data.total) {
              this.finished = true;
              this.pageNo = this.pageNum
            }
          } else {
            this.pageNo = 1
            this.pageNum = 1
            this.loading = false
            this.finished = true
          }
        } else {
          this.datas = this.data.list
        }
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
